import * as API from '@/services';
import {
  KfBackendEnumPicker,
  DEFAULT_FORM_LAYOUT,
  KfBizQuickFormProps,
  KfFloatingContextProps,
  KfInput,
  KfQuickForm,
  KfTextArea, KfUpload, KfUserPicker,
} from 'kf-web-library';
import {Form} from 'antd';
import React, {FunctionComponent} from 'react';
import HxJournalPicker from "@/components/HxJournalPicker";
import HxJournalPeriodPicker from "@/components/HxJournalPeriodPicker";
import HxJournalColumnPicker from '@/components/HxJournalColumnPicker';

const FormItem = Form.Item;
type QueryEntity = API.Article;
type CreateEntity = API.Article_Create;
type ModifyEntity = API.Article_Modify;

type DataFormProps = {} & KfBizQuickFormProps & KfFloatingContextProps;

/**
 * 文章 表单
 */
const QuickForm: FunctionComponent<DataFormProps> = (props) => {
  const {formType, bizId, ...rest} = props;

  return (
    <KfQuickForm
      formType={formType}
      formProps={{
        labelCol: {
          flex: '0 0 100px',
        },
        wrapperCol: {
          flex: '1',
        },
      }}
      defaultQueryRequest={() =>
        API.queryArticle(bizId!).then((resp) => {
          if (resp.flag) {
            resp.data = {
              ...resp.data,
              journalId: resp.data?.journal?.id,
              periodId: resp.data?.period?.id,
              columnId: resp.data?.column?.id,
            } as any;
          }
          return new Promise((resolve) => resolve(resp));
        })
      }
      submitRequest={{
        create: (formValues) => API.createArticle({...formValues} as CreateEntity),
        modify: (formValues) => API.patchArticle({articleImageUrl: formValues.articleImageUrl, id: bizId} as ModifyEntity),
      }}
      {...rest}
    >
      <FormItem name={nameof<ModifyEntity>((x) => x.articleTitleCn)} label="标题" rules={[{required: false}]}>
        <KfInput readonly={true}/>
      </FormItem>
      <FormItem name={nameof<ModifyEntity>((x) => x.articleAuthorCn)} label="作者" rules={[{required: false}]}>
        <KfInput readonly={true}/>
      </FormItem>
      <FormItem name={nameof<ModifyEntity>((x) => x.articleKeywordCn)} label="关键词" rules={[{required: false}]}>
        <KfInput readonly={true}/>
      </FormItem>
      <FormItem name={nameof<ModifyEntity>((x) => x.articleDoi)} label="DOI" rules={[{required: false}]}>
        <KfInput readonly={true}/>
      </FormItem>
      <FormItem name={nameof<ModifyEntity>((x) => x.journalId)} label="所属期刊" rules={[{required: false}]}>
        <HxJournalPicker.TableSelect readonly={true}/>
      </FormItem>
      <FormItem name={nameof<ModifyEntity>((x) => x.periodId)} label="所属刊期" rules={[{required: false}]}>
        <HxJournalPeriodPicker.TableSelect readonly={true}/>
      </FormItem>
      <FormItem name={nameof<ModifyEntity>((x) => x.columnId)} label="所属栏目" rules={[{required: false}]}>
        <HxJournalColumnPicker.TableSelect readonly={true}/>
      </FormItem>
      <FormItem name={nameof<ModifyEntity>((x) => x.articleImageUrl)} label="封面图" rules={[{required: false}]}>
        <KfUpload.Avatar/>
      </FormItem>
    </KfQuickForm>
  );
};

export default QuickForm;
